﻿@using Demo.Model
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="panel-body">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#main-search">搜索栏</a>
                </h4>
            </div>
            <div id="main-search" class="panel-collapse collapse in">
                <div class="panel-body">
                    <form id="searchForm" class="form-inline" role="form" onsubmit="search(); return false;">
                        <div class="form-group">
                            <label for="SearchValue">名称</label>
                            <input type="text" class="form-control" id="SearchValue" name="SearchValue" placeholder="请输入名称" maxlength="50" />
                        </div>
                        <div class="form-group">
                            <label for="Status">状态</label>
                            <select id="Status" name="Status" class="form-control">
                                <option value="@(E_Status.All)">--全部--</option>
                                <option value="@(E_Status.Disable)">不可用</option>
                                <option value="@(E_Status.Enable)">可用</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary">搜索</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="toolbar" class="btn-group" role="group" style="margin-bottom:10px;">
            <button type="button" class="btn btn-success" onclick="add()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button type="button" class="btn btn-danger" onclick="multidel()">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
    </div>
    <div class="row">
        <div class="dataTable_wrapper">
            <table class="table table-bordered table-striped table-hover" id="mainTable"></table>
        </div>
    </div>
</div>

@section scripts{
    <!--文字信息-->
    <script>
        var tableurl = "@Url.Action("ListGetData")";
        var delurl = "@Url.Action("Delete")";
        var editurl = "@Url.Action("Edit")";
        var title = {
            Id: "Id",
            Name: "名称",
            Ordering: "排序值",
            Status: "状态",
            CreationTime: "创建时间",
            LastUpdateTime: "修改时间",
            Operation: "操作"
        };
        var msg = {
            sel: "请选择一条数据",
            delconfirm: "您确定要删除这条数据吗？",
            add: "新增新闻类型",
            edit: "编辑新闻类型",
            del:"删除新闻类型",
            multidelconfirm: "您确定要删除这些数据吗？",
            disable:"不可用",
            enable:"可用",
        };
    </script>
    <script>
    var table;
    //表格初始化
    $(function () {
        var data = {};
        $("#searchForm").serializeArray().map(function (x) { data[x.name] = x.value; });
        table = $("#mainTable").datatablesSet({
            ajax: { url: tableurl, data: data },
            ordering: true,
            order: [[ 3, 'asc' ]],
            columns: [
                      {
                          data: 'Id', title: '<input type="checkbox" id="sel_all" onclick="sel_all()"/>', className: "text-center", orderable: false, width: "10px",
                          render: function (data, type, row, meta) {
                              return '<input type="checkbox" id="sel_' + data + '" class="sel_one" name="selId" value="' + data + '" onclick="sel_one(\'sel_' + data + '\')" />';
                          }
                      },
                      {
                          data: 'Id', title: title.Operation, orderable: false, width: "30px", className: "text-center", render: function (data, type, row, meta) {
                              return '<a href="javascript:void(0);" title="\'' + msg.edit + '\'" onclick="edit(\'' + data + '\')"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></a>'
                                + '&nbsp;|&nbsp;'
                                + '<a href="javascript:void(0);" title="' + msg.del + '" onclick="del(\'' + data + '\')"><span class="glyphicon glyphicon-remove" aria-hidden="true"></a>';
                          }
                      },
                      {
                          data: 'Name', title: title.Name
                      },
                      {
                          data: 'Ordering', title: title.Ordering
                      },
                      {
                          data: 'Status', title: title.Status, width: "40px", render: function (data, type, row, meta) {
                              switch (data) {
                                  case 0:
                                      return msg.disable;
                                  case 1:
                                      return msg.enable;
                                  default:
                                      break;
                              }
                          }
                      },
                      {
                          data: 'CreationTime', title: title.CreationTime, width: "120px", render: function (data, type, row, meta) {
                              return $.datetime.Format(data, 'yyyy-MM-dd hh:mm:ss');
                          }
                      },
                      {
                          data: 'LastUpdateTime', title: title.LastUpdateTime, width: "120px", render: function (data, type, row, meta) {
                              return $.datetime.Format(data, 'yyyy-MM-dd hh:mm:ss');
                          }
                      },
            ]
        }).on('xhr.dt', function () {//调用ajax获取数据时清除全选按钮选中状态
            $("#sel_all").prop("checked", false);
        });
    });
    //表格搜索
    function search() {
        var data = {};
        $("#searchForm").serializeArray().map(function (x) { data[x.name] = x.value; });
        $("#mainTable").datatablesReAjax(tableurl, data, null, true);
    }
    //删除
    function del(id) {
        $.confirmAjax(msg.delconfirm, { url: delurl, data: { Id: id }, search: function () { table.ajax.reload(null, false); } });
    }
    //新增
    function add() {
        $.modalBox(msg.add, { url: editurl, search: function () { table.ajax.reload(null, false); } });
    }
    //修改
    function edit(id) {
        $.modalBox(msg.edit, { url: editurl, data: { id: id }, search: function () { table.ajax.reload(null, false); } });
    }
    //列表全选
    function sel_all() {
        $("#mainTable").find("input:checkbox").each(function () {
            $(this).prop("checked", $("#sel_all").is(':checked'));
        });
    }
    //列表单选
    function sel_one(id) {
        if ($("#" + id).is(':checked')) {
            var uncheck = $(".sel_one").not(":checked");
            if (!uncheck.length) {
                $("#sel_all").prop("checked", true);
            }
        } else {
            $("#sel_all").prop("checked", false);
        }
    }
    //批量删除(其他批量操作也可参考)
    function multidel() {
        var selarry=[];
        $("input:checkbox[name='selId']:checked").each(function () {
            selarry.push($(this).val());
        });
        if (selarry.length>0) {
            var selId = selarry.join("','");
            $.confirmAjax(msg.multidelconfirm, { url: delurl, data: { id: selId }, search: function () { table.ajax.reload(null, false); } });
        } else {
            toastr.warning(msg.sel);
        }
    }
    </script>
}

